<template>
  <div class="upload-videos">
    <!-- <div class="title">上传视频</div> -->
    <div class="videos-info">
      <el-form
        label-width="20px"
        :model="videosForm"
        :rules="videosRules"
        ref="videosForm"
      >
        <MyHeader>
          <div slot="title">视频信息</div>
        </MyHeader>
        <div class="videos-info-form">
          <el-form-item prop="video_name" class="is-required">
            <el-input
              v-model="videosForm.video_name"
              placeholder="请输入视频名称"
            ></el-input>
          </el-form-item>
          <el-form-item prop="video_comment">
            <el-input
              placeholder="视频简介"
              v-model="videosForm.video_comment"
            />
          </el-form-item>
        </div>
        <MyHeader>
          <div slot="title">上传视频</div>
        </MyHeader>
        <div class="btn-box">
          <uploadImg
            @setCardPic="setCardPic($event, 'video_path')"
            @getVideoName="getVideoName"
            @showProcess="showProcess"
            ref="videoPath"
            type="video"
            api="uploadVideo"
            :params="videoParams"
            class="upload-video"
            btn
          >
            <div class="upload-video-btn" slot="button">上传视频</div>
          </uploadImg>
          <div class="import-btn" @click="importVideo">导入视频</div>
          <el-row>
            <el-col :span="7">
              <div :title="video_name" class="video-name">
                {{ video_name }}
              </div>
            </el-col>
            <el-col :offset="2" :span="15">
              <el-col :span="2">
                {{ idCardUploadPercentage == 100 ? '上传完成' : idCardUploadPercentage > 0 ? '上传中' : '' }}
              </el-col>
              <el-col :span="22">
                <div class="process">
                  <el-progress
                    style="margin: 5px"
                    :width="70"
                    color="#E0CBB4"
                    v-if="idCardIsUpload"
                    :percentage="idCardUploadPercentage"
                  ></el-progress>
                  <div v-show="idCardUploadPercentage == 100">
                    上传完成
                  </div>
                </div>
              </el-col>
            </el-col>
          </el-row>
        </div>
        <el-dialog
          title="导入视频"
          :visible.sync="importVisible"
          center
          @close="importClose"
          top="40vh"
          width="720px"
        >
          <el-form :model="importForm" :rules="importRules" ref="importForm">
            <el-form-item prop="url" class="is-required">
              <el-input
                v-model="importForm.url"
                placeholder="请输入视频链接"
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="importSubmit('importForm')"
              >确 定</el-button
            >
            <el-button @click="importClose">取 消</el-button>
          </span>
        </el-dialog>
        <MyHeader>
          <div slot="title">视频介绍</div>
        </MyHeader>
        <div class="works-introduce">
          <el-form-item prop="video_detail" label="详情" label-width="80px">
            <el-input
              v-model="videosForm.video_detail"
              type="textarea"
              resize="none"
              maxlength="2000"
              show-word-limit
            />
          </el-form-item>
          <el-form-item prop="video_explain" label="说明" label-width="80px">
            <el-input
              v-model="videosForm.video_explain"
              type="textarea"
              resize="none"
              maxlength="2000"
              show-word-limit
            />
          </el-form-item>
        </div>
      </el-form>
      <MyHeader>
        <div slot="title">上传封面</div>
        <div slot="secondTitle">建议尺寸为800*600像素</div>
      </MyHeader>
      <div class="upload-cover">
        <uploadImg
          @setCardPic="setCardPic($event, 'video_page')"
          ref="coverPath"
          type="image"
          api="uploadImage"
          :params="coverParams"
        >
          <div slot="button">上传视频</div>
        </uploadImg>
      </div>
      <div class="submit-box">
        <div class="release all-center" @click="handleRelease('videosForm')">
          发布
        </div>
        <!-- <div @click="handlePreview" class="preview-btn all-center">预览</div> -->
        <div @click="handleRelease('videosForm', true)" class="draft">
          草稿箱
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MyHeader from "../component/common/myHeader.vue";
export default {
  name: "",
  middleware: 'identityInfo',
  components: {
    MyHeader,
  },
  props: ['data_id'],
  data() {
    return {
      videosForm: {
        art_id: '',
        video_name: "",
        video_comment: '',
        video_explain: "",
        video_detail: "",
        video_page: '',
        video_path: ''
      },
      video_name: '',
      idCardIsUpload: false, // 是否需要进度条
      idCardUploadPercentage: 0,
      videosRules: {
        video_name: [
          {
            required: true,
            message: "请输入作品名称",
            trigger: "blur",
          },
        ],
        // video_type: [
        //   {
        //     required: true,
        //     message: "请选择类型",
        //     trigger: "change",
        //   },
        // ],
        // video_explain: [
        //   {
        //     required: true,
        //     message: "请输入作品说明",
        //     trigger: "blur",
        //   },
        // ],
        // video_detail: [
        //   {
        //     required: true,
        //     message: "请输入作品详情",
        //     trigger: "blur",
        //   },
        // ],
      },
      importForm: {
        url: "",
      },
      importRules: {
        url: [
          {
            required: true,
            message: "请输入视频链接",
            trigger: "blur",
          },
        ],
      },
      typeOptions: ["国画", "油画", "水彩", "版画", "水粉", "素描", "铅笔"],
      coverParams: {
        op: "upload_file"
      },
      videoParams: {
        op: "upload_file"
      },
      importVisible: false,
      videoUrl: "", // 导入视频输入框的内容
    };
  },
  computed: {},
  watch: {
    data_id(val) {
      if (val) {
        this.getWorkInfo()
      } else {
        this.resetForm()
      }
    }
  },
  created() {},
  mounted() {
    this.videosForm.art_id = this.$store.state.user.info.user_info?.art_info?.data_id
    this.$api.videoType({}, {}).then((res) => {
      this.typeOptions = res.result.item_list;
    });
    // let data_id = this.$store.state.user.info.user_info?.data_id || "";
    // this.videoParams.data_id = data_id;
    // this.coverParams.data_id = data_id;
  },
  methods: {
    getWorkInfo() {
      this.$api
        .getVideoInfo({ data_id: this.data_id }, {})
        .then((res) => {
          this.videosForm.art_id = res.result.art_id
          this.videosForm.video_name = res.result.video_name
          // this.videosForm.video_type = res.result.video_type
          this.videosForm.video_comment = res.result.video_comment
          this.videosForm.video_explain = res.result.video_explain
          this.videosForm.video_detail = res.result.video_detail
          this.videosForm.video_page = res.result.video_page
          this.videosForm.video_path = res.result.video_path
          this.$refs.coverPath.setEditImg(res.result.video_page)
        });
    },
    uploadVideos() {
      // this.$refs.coverPath.
    },
    // 预览
    handlePreview() {
      console.log('预览')
    },
    handleDraft() {
      console.log('放入草稿箱')
    },
    resetForm() {
      this.video_name = ''
      this.$refs.videosForm.resetFields()
      this.$refs.coverPath.setEditImg()
    },
    handleRelease(formName, draft) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let api
          if (this.data_id) {
            api = 'updateArtVideo'
          } else {
            api = 'createArtVideo'
          }
          this.$api
            [api](
              {
                art_id: this.$store.state.user.info.user_info?.art_info?.data_id,
                ...this.videosForm,
                recycle: draft ? 1 : 0,
                video_page: this.importForm.url || this.videosForm.video_page
              },
              { data_id: this.data_id ? this.data_id : '' }
            )
            .then((res) => {
              this.$message.success('视频作品发布成功')
              this.resetForm()
              this.$router.push({ path: '/editPersonalHome', menuActive: 2 })
            });
        }
      });
      console.log("发布项目");
    },
    /*执行uploadImg组件报出来的事件，path就是显示图片的路径*/
    setCardPic(path, pic) {
      this.videosForm[pic] = path
      // this.idCardUploadPercentage = 100
      // this.idCardIsUpload = false
      console.log(path, pic);
    },
    getVideoName(video_name) {
      this.video_name = video_name
    },
    showProcess(idCardIsUpload, idCardUploadPercentage) {
      this.idCardUploadPercentage = idCardUploadPercentage
      this.idCardIsUpload = idCardIsUpload
      // this.id
      // const timer = setInterval(() => {
      //   if (this.idCardUploadPercentage >= 99) {
      //     clearInterval(timer)
      //     return
      //   }
      //   this.idCardUploadPercentage += 1
      // }, 20)
    },
    setVideo(path, pic) {
      console.log(path, pic);
    },
    // 打开导入视频弹窗
    importVideo() {
      this.importVisible = true;
    },
    // 提交导入视频信息
    importSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.importVisible = false
          this.video_name = this.importForm.url
          this.$message.success("导入成功");
        }
      });
    },
    importClose() {
      this.importVisible = false;
      this.$refs.importForm.resetFields();
    },
  },
};
</script>

<style scoped lang="less">
.upload-videos {
  // padding: 60px 276px 80px;

  .title {
    font-size: 30px;
    font-weight: 800;
    color: #000;
    line-height: 30px;
    margin-bottom: 40px;
  }

  .is-required {
    position: relative;
  }

  .is-required::before {
    content: "*";
    color: #ff4949;
    margin-right: 4px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
  }

  ::v-deep(.el-dialog__header) {
    padding: 24px 24px 0 40px;
    text-align: left;
  }

  ::v-deep(.el-dialog__body) {
    padding: 60px 40px 40px;
  }

  .works-introduce {
    background: #fff;
    padding: 40px 217px 40px 40px;
    margin-bottom: 40px;

    ::v-deep(.el-textarea__inner) {
      height: 122px;
      background-color: #f3f4f4;
      border-radius: 0;
    }

    ::v-deep(.el-input__count) {
      background-color: #f3f4f4;
    }

    .is-required::before {
      content: "";
    }
  }

  // ::v-deep(.el-icon-arrow-up:before) {
  //   width: 0px;
  //   height: 0px;
  //   border: 12px solid transparent;
  //   border-top-color: #999;
  //   content: '';
  // }

  ::v-deep(.el-dialog__footer) {
    padding: 0 0 60px;

    .el-button--primary {
      width: 220px;
      height: 48px;
      background: #e0cbb4;
      border: 0;
      border-radius: 0;
      font-size: 16px;
      color: #333;
    }

    .el-button + .el-button {
      width: 220px;
      height: 48px;
      border: 1px solid #ccc;
      font-size: 16px;
      color: #333;
      border-radius: 0;
      margin-left: 40px;
      box-sizing: border-box;
    }

    .el-button {
      display: inline-flex;
      justify-content: center;
      align-items: center;
    }
  }

  .videos-info {
    .videos-info-form {
      padding: 40px 218px 40px 35px;
      margin-bottom: 40px;
      background: #fff;

      ::v-deep(.el-select) {
        width: 100%;
      }

      ::v-deep(.el-input__inner) {
        background-color: #f3f4f4;
        border-radius: 0;
        height: 50px;
      }

      ::v-deep(input::-webkit-input-placeholder) {
        color: #999;
      }

      ::v-deep(.el-form-item__content) {
        line-height: normal;
      }
    }

    .btn-box {
      padding: 60px;
      background: #fff;
      margin-bottom: 40px;

      .upload-video-btn,
      .import-btn {
        width: 220px;
        height: 48px;
        font-size: 16px;
        color: #333;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin-right: 40px;
        cursor: pointer;
      }

      .upload-video-btn {
        background: #e0cbb4;
      }

      .upload-video {
        display: inline-block;
        margin-bottom: 20px;
      }

      .import-btn {
        border: 1px solid #ccc;
      }

      .video-name {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .upload-cover {
      padding: 40px 0 40px 61px;
      background: #fff;
      margin-bottom: 60px;

      ::v-deep(.avatar-uploader .el-upload) {
        border: 1px solid #ccc;
      }

      ::v-deep(.div-plus) {
        width: 402px;
        height: 302px;
      }
    }

    .submit-box {
      .preview-btn,
      .release {
        width: 220px;
        height: 48px;
        font-size: 16px;
        color: #333;
        background: #e0cbb4;
        cursor: pointer;
      }

      .preview-btn {
        background-color: transparent;
        border: 1px solid #ccc;
        margin-left: 35px;
      }

      .draft {
        font-size: 16px;
        font-weight: 400;
        color: #C5A37D;
        float: right;
        cursor: pointer;
      }
    }
  }
}
</style>
